/**
 * 代理商成本比例列表
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>代理商成本比例列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
        <div class="serachTop"> 
              <!-- 搜索筛选 -->
            <el-form :inline="true" :model="formInline" class="user-search">
              <!-- <el-form-item >
                <el-input
                  size="small"
                  v-model="formInline.name"
                  placeholder="组名"
                  clearable
                ></el-input>
              </el-form-item> -->
              <el-form-item>
                <el-input
                  size="small"
                  v-model="formInline.userId"
                  placeholder="输入用户ID"
                  type="number"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >
                  搜索
                </el-button> 
              </el-form-item>
            </el-form>
        </div> 
    <!--列表-->
    <div class="ra_box">
      <el-table
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          style="width: 100%"
        >
          <el-table-column prop="userId" label="用户ID" min-width="80">
          </el-table-column>
          <el-table-column prop="params.iamCount" label="IAM" min-width="110"> </el-table-column> 
          <el-table-column
            prop="loginName"
            label="账户名称"
            show-overflow-tooltip
            min-width="200"
          >
          </el-table-column>
          <el-table-column prop="userName" label="昵称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="balance"
            label="账户余额"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>{{ b(scope.row.balance) }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="cardBalance"
            label="卡余额"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{
                  b(
                    scope.row.params.cardBalance
                      ? scope.row.params.cardBalance
                      : 0
                  )
                }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="count" label="卡Bin" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ scope.row.params.count }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="refuseCount"
            label="拒付率"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.params.transactionCount == 0
                    ? "0%"
                    : (
                        (scope.row.params.refuseCount /
                          scope.row.params.transactionCount) *
                        100
                      ).toFixed(0) + "%"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundCount"
            label="退款率"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.params.transactionCount == 0
                    ? "0%"
                    : (
                        (scope.row.params.refundCount /
                          scope.row.params.transactionCount) *
                        100
                      ).toFixed(0) + "%"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundAmount"
            label="退款金额率"
            show-overflow-tooltip
            min-width="160"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.params.transactionAmount == 0
                    ? "0%"
                    : (
                        (scope.row.params.refundAmount /
                          scope.row.params.transactionAmount) *
                        100
                      ).toFixed(0) + "%"
                }}
              </div>
            </template>
          </el-table-column>  -->
          <el-table-column
            prop="createBy"
            label="操作人"
            show-overflow-tooltip 
          >
        </el-table-column>
           
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="180"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column prop="remark" label="备注" show-overflow-tooltip>
        </el-table-column> -->
          <el-table-column align="center" fixed="right" label="操作" >
            <template slot-scope="scope"> 
              <el-button
                size="mini" 
                type="primary"
                @click="handleEdit(scope.$index, scope.row)" 
                style="color: #fff; cursor: pointer;"  
              >
                设置分成比例
              </el-button> 
              
            </template>
          </el-table-column>
        </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 新增界面  -->
    <el-dialog
      :close-on-click-modal="false"
      title="设置分成比例"
      :visible.sync="addFormVisible"
      min-width="1200px"
      @close="closeDialog()"
    > 
      <el-alert
         show-icon
        title="设置代理商分成比例（每条数据必须无缝衔接）,最小退款率为0，最大退款率为1,保留两位小数！比如35%，就填写0.35。"
        type="error" style="margin-bottom:20px">
      </el-alert> 

    
        <el-table
          :data="rateData"
          style="width: 100%">
          <el-table-column
            prop="minRate"
            label="最小退款率" 
            min-width="240">
            <template slot-scope="scope">  
              <el-input-number v-model="scope.row.minRate" disabled :precision="2"  :min="0" :max="1" style="width: 100%;" placeholder="请输入最小退款率"></el-input-number> 
            </template> 
          </el-table-column>
          <el-table-column
            prop="maxRate"
            label="最大退款率"
            min-width="240">
            <template slot-scope="scope">  
              <el-input-number v-model="scope.row.maxRate"  :disabled="scope.$index!=rateData.length-1?true:false" :precision="2" @change="changeNum($event,scope.row)"  style="width: 100%;" :step="0.01"  :min="Number(scope.row.minRate+0.01)" :max="1" placeholder="请输入最大退款率"></el-input-number> 
            </template> 
          </el-table-column>
          <el-table-column
            prop="agentRate"
            min-width="240"
            label="代理商分成率">
            <template slot-scope="scope"> 
              <el-input-number v-model="scope.row.agentRate"  :min="0" :max="1" style="width: 100%;" @change="changeNum($event,scope.row)" :precision="2" placeholder="请输入代理商分成率" :step="0.01"  ></el-input-number>  
            </template> 
          </el-table-column>
          <el-table-column
            prop="updateAt"
            min-width="170"
            label="更新时间">
            <template slot-scope="scope"> 
              {{  timestampToTime(scope.row.updateAt, 8 * 60 * 60)  || '-' }}
            </template>  
          </el-table-column>
          <el-table-column
            prop="createBy"
            min-width="100"
            label="操作人">
            <template slot-scope="scope"> 
              {{ scope.row.createBy  || '-'}}
            </template> 
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作">
            <template slot-scope="scope">  
              <i class="el-icon-circle-plus" @click="addHang(scope.$index,scope.row)" v-if="scope.$index==rateData.length-1&&(scope.row.maxRate!=1.00||!scope.row.maxRate)"></i>
              <i class="el-icon-remove" v-if="scope.$index==rateData.length-1&&scope.$index!=0" @click="removeHang(scope.$index,scope.row)"></i>
            </template> 
          </el-table-column>
        </el-table> 
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
        <!-- <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="delForm"
          >删除设置</el-button> -->
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('addForm')"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑界面 -->
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false,
      editFormVisible: false,
      addFormVisible: false,
      addUserVisible: false,
      b: format,
      timestampToTime: timestampToTime,
      formInline: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        userId: "",
      },
      rateData: [
        {}
      ],  
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      addForm:{},
      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:''
    };
  },
  // 注册组件
  components: {
    Pagination,
    codeChoose
  },
  created() {
    this.getdata(this.formInline);
    this.getInfo();
  },
  methods: {
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    }, 
    getdata(parameter) {
      let url = getUrl(parameter);
      service
        .get("/api/admin/getUserList" + url+'&agent=1', { 
        })
        .then((res) => {
          this.loading = false;
          if (res.code == 0) { 
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
 
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    handleEdit(name, row) { 
      this.addForm = row;  
      service
        .get("/api/admin/getAgentRefundRateList/"+this.addForm.userId, {
          "userId": this.addForm.userId,
        })
        .then((res) => {
          this.loading = false;
          if (res.code == 0) { 
            this.rateData =res.data.length>0?res.data:[{
              minRate:0
            }]; 
          } else {
            // this.$message({
            //   type: "info",
            //   message: res.msg,
            // });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
      }); 
      this.addFormVisible = true;
    }, 

    getParam(val,type){  
      this.headers = val ;  
      this.editSaveAuth()  
    },  
    editSaveAuth(){   
        reqJson('post',"/api/admin/editAgentRefundRate/"+this.addForm.userId, this.rateData,{
          headers:{
            ...this.headers
          }
        })   
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message.success(res.msg);
            this.getdata(this.formInline);
            this.closeDialog();
            // this.addForm = res.data; 
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
      }); 
    },

    submitForm(name) {   
      if(this.rateData[this.rateData.length-1].maxRate!=1){
        return  this.$message.error(spStr('每条数据必须无缝衔接,最大退款率为1，请重新设置！', "PhotonPay", ""));
      }
      this.loading = true;

      if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes('/api/admin/editAgentRefundRate')){
            this.$refs.codeRef.openDialog(); 
            this.verType = 'add'
          }else{ 
            this.editSaveAuth();
          }
        }else{
          this.editSaveAuth();
        }   


      
    },
    delForm(){
      service
        .get("/api/admin/getAgentRefundRateList/"+this.addForm.userId, {
          "userId": this.addForm.userId,
        })
        .then((res) => {
          this.loading = false;
          if (res.code == 0) { 
            this.rateData = res.data; 
          } else {
            // this.$message({
            //   type: "info",
            //   message: res.msg,
            // });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
      }); 
    }, 
    // 关闭编辑、增加弹出框
    closeDialog(name) {
      this.addFormVisible = false;
    },
    addHang(index,val){  
      if(!val.maxRate||!val.agentRate){
        return this.$message.error(spStr('请把当前输入框填写完整！', "PhotonPay", ""));
      }
      this.rateData.push({
        minRate:Number(val.maxRate)+0.01
      })
    },
    changeNum(val){ 
      if(val>1){
        return this.$message.error(spStr('最大值为1', "PhotonPay", ""));
      }
      
    },
    removeHang(index){ 
      this.rateData.splice(index,1)
    }
 
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
/deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
.myForm .el-form-item {
  /* display: inline-block;
  margin-left: 5%; */
}

.el-form .select10 .el-select {
  width: 100%;
}
</style>

 
 